<template>
	<div class="mar-l-10 mar-r-10 mar-t-20">
		<div class="flex">
			<div class="mar-r-10">
				<span class="font-14">章名称：</span>
				<el-input v-model="form.chapter" placeholder="请输入章的名称" size="small" class="w-px-200"></el-input>
			</div>

			<el-button type="primary" size="small">搜索</el-button>
		</div>

		<div class="mar-t-20">
			<el-button type="primary" size="small" icon="el-icon-plus" @click="showUpdateChapter()">添加章</el-button>
			<el-button type="danger" size="small" icon="el-icon-delete">批量删除</el-button>
		</div>
		
		<el-table :data="tableData" border class="mar-t-10">
			<el-table-column type="selection" width="60" align="center"></el-table-column>

			<el-table-column label="课程名称" prop="courseName">
				<template slot-scope="props">
					<div v-if="props.row.courseName !== null && props.row.courseName !== ''">《&nbsp;{{props.row.courseName}}&nbsp;》</div>
					<div v-else class="color-999999">暂无数据</div>
				</template>
			</el-table-column>

			<el-table-column label="章名称" prop="chapterName"></el-table-column>

			<el-table-column label="章介绍" prop="desc">
				<template slot-scope="props">
					<div v-if="props.row.desc !== null && props.row.desc !== ''">
						<div v-if="props.row.desc.length <= 12">{{props.row.desc}}</div>

						<div v-else>
							<el-tooltip class="item" effect="dark" :content="props.row.desc" placement="top-start">
								<span>{{props.row.desc.substr(0, 12) + "..."}}</span>
							</el-tooltip>
						</div>
					</div>

					<div v-else class="color-999999">暂无课程介绍</div>
				</template>
			</el-table-column>

			<el-table-column label="章节时长" prop="times">
				<template slot-scope="props">
					<div>
						<span class="color-ff5722 mar-r-5">{{props.row.times}}</span>
						<span>小时</span>
					</div>
				</template>
			</el-table-column>

			<el-table-column label="节数量" prop="childCount">
				<template slot-scope="props">
					<div>
						<span class="color-ff5722 mar-r-5">{{props.row.childCount}}</span>
						<span>小节</span>
					</div>
				</template>
			</el-table-column>

			<el-table-column label="备注" prop="remark">
				<template slot-scope="props">
					<div v-if="props.row.remark !== null && props.row.remark !== ''">
						<div v-if="props.row.remark.length <= 12">{{props.row.remark}}</div>

						<div v-else>
							<el-tooltip class="item" effect="dark" :content="props.row.remark" placement="top-start">
								<span>{{props.row.remark.substr(0, 12) + "..."}}</span>
							</el-tooltip>
						</div>
					</div>

					<div v-else class="color-999999">暂无备注</div>
				</template>
			</el-table-column>

			<el-table-column label="操作">
				<template slot-scope="props">
					<div>
						<el-button type="text" style="color: #006cff;" @click.stop="showUpdateChapter(props.row)">编辑</el-button>
						<el-button type="text" style="color: #1f8a24;">添加节</el-button>
						<el-button type="text" style="color: #ff0000;">删除</el-button>
					</div>
				</template>
			</el-table-column>
		</el-table>

		<!-- 分页 -->
        <div class="flex justify-center mar-t-20">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pages.currentPage"
                :page-sizes="pages.pageSizes"
                :page-size="pages.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pages.total">
            </el-pagination>
        </div>

		<!-- 添加章的弹窗 -->
		<el-dialog :title="update.isUpdate ? '编辑章' : '添加章'" :visible.sync="update.show" size="80%" :close-on-click-modal="false" :before-close="closeUpdateChpater">
			<div>
				<el-form ref="updateForm" :model="update.form" label-width="auto">
					<el-form-item label="课程名称：">
						<el-input v-model="update.form.courseName" size="small" :readonly="update.isUpdate ? true : false" placeholder="请输入课程名称"></el-input>
					</el-form-item>

					<el-form-item label="章名称：">
						<el-input v-model="update.form.chapterName" size="small" placeholder="请输入章名称"></el-input>
					</el-form-item>

					<el-form-item label="章时长：">
						<el-input v-model="update.form.times" size="small" placeholder="请输入章时长"></el-input>
					</el-form-item>

					<el-form-item label="节数量：">
						<el-input v-model="update.form.childCount" size="small" placeholder="请输入节数量"></el-input>
					</el-form-item>

					<el-form-item label="章介绍：">
						<el-input v-model="update.form.desc" size="small" placeholder="请输入章介绍"></el-input>
					</el-form-item>

					<el-form-item label="备注：">
						<el-input v-model="update.form.remark" size="small" placeholder="请输入备注"></el-input>
					</el-form-item>
				</el-form>
			</div>

			<span slot="footer" class="dialog-footer">
				<el-button size="mini" @click="closeUpdateChpater">取 消</el-button>
				<el-button size="mini" type="primary" @click="addChapter()" v-if="!update.isUpdate">添 加</el-button>
				<el-button size="mini" type="warning" @click="editChapter()" v-else>编 辑</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data () {
			return {
				form: {
					chapter: ""
				},

				tableData: [],

				// 分页
				pages: {
					currentPage: 1,
					pageSize: 10,
					pageSizes: [10, 20, 50, 100],
					total: 0
				},

				// 添加(编辑)章弹窗
				update: {
					show: false,
					isUpdate: false,
					row: {},
					form: {
						courseName: "",
						chapterName: "",
						times: null,
						childCount: null,
						desc: "",
						remark: ""
					}
				}
			}
		},
		
		methods: {
			// 查询章列表
			findTableData () {
				this.tableData = [
					{
						id: 1,
						courseName: "javascript 从入门到精通",
						chapterName: "课程学习指南及导学",
						desc: "介绍整体课程内容及学习方法的指导。",
						times: 3,
						childCount: 10,
						remark: ""
					}
				];
			},

			// currentPage 改变时的回调
			handleCurrentChange (val) {
				this.pages.currentPage = val;
				this.findTableData();
			},

			// pageSize 改变时的回调
			handleSizeChange (val) {
				this.pages.pageSize = val;
				this.findTableData();
			},

			// 显示添加章的弹窗
			showUpdateChapter (row) {
				if (row) {
					this.update.row = row;
					this.update.isUpdate = true;
				}

				this.update.show = true;
			},

			// 添加章
			addChapter () {

			},

			// 编辑章
			editChapter () {

			},

			// 关闭添加章的弹窗
			closeUpdateChpater () {
				if (this.update.isUpdate) {
					this.update.row = {};
					this.update.isUpdate = false;
				}

				this.update.form.courseName = "";
				this.update.form.chapterName = "";
				this.update.form.times = null;
				this.update.form.childCount = null;
				this.update.form.desc = "";
				this.update.form.remark = "";
				this.update.show = false;
			}
		},
		
		created () {
			this.findTableData();
		}
	}
</script>

